<!DOCTYPE html>
<!-- Available query parameters to configure the behavior of this page -->
<!-- showControlsPanel: if true, display buttons to apply overlays to BPMN elements (on the left side of the page) -->
<!-- showMousePointer: if true, highlight/show the mouse position -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bpmn-visualization - Diagram Navigation</title>
  <link rel="icon" type="image/svg+xml" href="./static/img/favicon.svg">
  <link rel="stylesheet" href="./static/css/test-page.css">
  <style>
    .fit {
      background-color: #f9dfe8;
    }

    .zoom-config {
      font-size: 0.7em;
      width: 35px;
    }
  </style>
  <script src="../ts/pages/diagram-navigation.ts" type="module"></script>
</head>
<body>
<div class="flex-container">
  <div id="controls-panel" class="flex-column-container hidden" style="flex-grow: 1">
    <div class="info">
      <!-- https://icons.getbootstrap.com/icons/info-square-fill/ -->
      <svg width="28px" height="28px" viewBox="0 0 16 16" class="bi bi-info-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd"
              d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm8.93 4.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
      </svg>
      <div class="tooltip">
        <p>Drag and Drop a BPMN file</p>
      </div>
    </div>

    <!-- Zoom -->
    <h5>Zoom</h5>
    <div class="flex-column-container">
      <button id="zoom-in" title="Zoom In">
        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M7,7 L5,7 L5,9 L7,9 L7,11 L9,11 L9,9 L11,9 L11,7 L9,7 L9,5 L7,5 L7,7 Z M12.9056439,14.3198574 C11.5509601,15.3729184 9.84871145,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.84871145 15.3729184,11.5509601 14.3198574,12.9056439 L19.6568542,18.2426407 L18.2426407,19.6568542 L12.9056439,14.3198574 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z" fill="currentColor"/>
        </svg>
      </button>
    </div>
    <div class="flex-column-container">
      <button id="zoom-out" title="Zoom Out">
        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.9056439,14.3198574 C11.5509601,15.3729184 9.84871145,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.84871145 15.3729184,11.5509601 14.3198574,12.9056439 L19.6568542,18.2426407 L18.2426407,19.6568542 L12.9056439,14.3198574 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z M5,7 L11,7 L11,9 L5,9 L5,7 Z" fill="currentColor"/>
        </svg>
      </button>
    </div>
    <div class="flex-column-container">
      <label for="zoom-throttle">throttle</label>
      <input id="zoom-throttle" class="zoom-config" type="number" placeholder="thr" value="40" disabled
             title="to play with throttle pass parameter in url like this: .../diagram-navigation.html?zoomThrottle=40"/>
    </div>
    <div class="flex-column-container">
      <label for="zoom-debounce">debounce</label>
      <input id="zoom-debounce" class="zoom-config" type="number" placeholder="deb" value="30" disabled
             title="to play with debounce pass parameter in url like this: .../diagram-navigation.html?zoomDebounce=30"/>
    </div>

    <!-- Fit -->
    <h5>Fit</h5>
    <button type="button" class="fit" id="None" title="Reset dimensions and positions (BPMN Diagram values)">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
          fill="currentColor"
        />
      </svg>
    </button>
    <button type="button" class="fit" id="HorizontalVertical" title="Fit">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M3 3H9V5H5V9H3V3Z" fill="currentColor"/>
        <path d="M3 21H9V19H5V15H3V21Z" fill="currentColor"/>
        <path d="M15 21H21V15H19V19H15V21Z" fill="currentColor"/>
        <path d="M21 3H15V5H19V9H21V3Z" fill="currentColor"/>
      </svg>
    </button>
    <button type="button" class="fit" id="Horizontal" title="Fit horizontally">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M9.95263 16.9123L8.59323 18.3608L2.03082 12.2016L8.18994 5.63922L9.64826 7.00791L4.85783 12.112L9.95212 16.8932L9.95263 16.9123Z"
          fill="currentColor"
        />
        <path
          d="M14.0474 16.9123L15.4068 18.3608L21.9692 12.2016L15.8101 5.63922L14.3517 7.00791L19.1422 12.112L14.0479 16.8932L14.0474 16.9123Z"
          fill="currentColor"
        />
      </svg>
    </button>
    <button type="button" class="fit" id="Vertical" title="Fit vertically">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6 9.65685L7.41421 11.0711L11.6569 6.82843L15.8995 11.0711L17.3137 9.65685L11.6569 4L6 9.65685Z"
          fill="currentColor"
        />
        <path
          d="M6 14.4433L7.41421 13.0291L11.6569 17.2717L15.8995 13.0291L17.3137 14.4433L11.6569 20.1001L6 14.4433Z"
          fill="currentColor"
        />
      </svg>
    </button>
    <button type="button" class="fit" id="Center" title="Fit Center">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="M9 9H3V7H7V3H9V9Z" fill="currentColor"/>
        <path d="M9 15H3V17H7V21H9V15Z" fill="currentColor"/>
        <path d="M21 15H15V21H17V17H21V15Z" fill="currentColor"/>
        <path d="M15 9.00012H21V7.00012H17V3.00012H15V9.00012Z" fill="currentColor"/>
      </svg>
    </button>
  </div>

  <div id="bpmn-container"></div>
</div>
</body>
</html>
